// 未来6个月评估高峰分析预测
<template>
  <div class="peak_analysis_box" id="peak_analysis"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'PeakAnalysis',
  data () {
    return {
      analyticalPredictionTitle: [],
      analyticalPredictionValue: []
    }
  },
  mounted () {
    this.AnalyticalPredictionHandle()
  },
  methods: {
    AnalyticalPredictionHandle () {
      this.$http.post(this.$api.AnalyticalPrediction.analyticalPrediction, ' ', true).then(result => {
        let arr = result.data.result
        for (const value of arr.values()) {
          this.analyticalPredictionTitle.push(value.yf)
          this.analyticalPredictionValue.push(value.sl)
        }
        this.charts(this.analyticalPredictionTitle, this.analyticalPredictionValue)
      })
    },
    charts (arrX, arrY) {
      let myChart = echarts.init(document.getElementById('peak_analysis'))
      myChart.setOption({
        title: {
          text: '未来6个月评估高峰分析预测',
          textStyle: {
            color: '#fff',
            fontSize: 30
          },
          top: '3%',
          left: '5%'
        },
        grid: {
          left: '6%',
          right: '6%',
          top: '18%',
          bottom: '8%',
          containLabel: true
        },
        tooltip: { // 提示框
          trigger: 'axis', // 触发类型
          axisPointer: { // 坐标轴指示器配置项
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff', // 坐标字体颜色
              fontSize: 24
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff' // x坐标轴颜色
            }
          },
          data: arrX
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#60707F' // y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#60707F',
              fontSize: 24
            }
          },
          splitLine: {
            lineStyle: {
              color: '#60707F'
            }
          }
        },
        series: [{
          data: arrY,
          type: 'line',
          symbol: 'circle', // 标记的图形
          symbolSize: 6, // 拐点的大小
          itemStyle: {
            normal: {
              borderColor: '59F9FA', // 边框颜色
              color: '#59F9FA', // 折线上标记点的颜色 和 图例的颜色
              lineStyle: {
                width: 1, color: '#59F9FA' // 折线的颜色
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '59F9FA',
                  fontSize: 20
                }
              }
            }
          },
          areaStyle: {
            normal: {
              type: 'default',
              color: new echarts.graphic.LinearGradient(50, 104, 155, 0.4, [{
                offset: 0,
                color: '#32689B' // 区域颜色
              }, {
                offset: 1,
                color: '#32699E' // 区域颜色
              }], false)
            }
          }
        }]
      })
    }
  }
}
</script>

<style scoped>
  .peak_analysis_box {
    width: 98%;
    height: 90%;
    position: absolute;
    left: 1rem;
    top: 4rem;
  }
</style>
